<template>
  <div class="mui-content " >
    <div >
    <!--进入页面加载资源动画-->
      <div v-if="showme ">
        <div id="Loading">
          <div class="loader-inner ball-beat">
            <div></div>
            <div></div>
            <div></div>
          </div>
        </div>
      </div>
    <div >
      <!--<heade background='' title='资源查询' v-on:goBack="goBack($event)"></heade>-->
      <div class="nav">
        <div class="navLeft" style="position: relative" @click.stop="leftOut">
          {{left}}
          <div class="bb" :style="{display:cur==1?'block':'none'}">
            <ul>
              <li v-for="(item,index) in lefts" :key="index" @click.stop="selectleft(index)">{{item}}</li>
            </ul>
          </div>
        </div>
        <div class="navRight" style="position: relative" @click.stop="rightOut">
          {{right}}
          <div class="bb" :style="{display:cur1==1?'block':'none'}">
            <ul>
              <li v-for="(item,index) in rights" :key="index" @click.stop="selectright(index)">{{item}}</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="search">
        <input type="text" placeholder="请输入关键字..." v-model="search" v-on:keyup.enter="submit">
        <div class="mui-icon mui-icon-search" @click="submit"></div>
      </div>
      <div  class="contentWrapper" ref="contentWrap" >
        <div class="contentWrapper1">
          <div class="content " v-for="(list,index) in resource" :key="index" >
            <div class="leftContent  mui-left" @click="ResourceDetail(resource[index])">
              <img :src=list.SUrl />
            </div>
            <div class="rightContent  mui-right">
              <div  class="title" @click="ResourceDetail(resource[index])">{{list.Name}}</div>
              <div class="text"><span>作者:</span><span>{{list.Author}}</span></div>
              <div class="text"><span>上传时间:</span><span>{{list.CDate}}</span></div>
              <div class="text"><span>资源类型:</span><span>{{list.ProjectType}}</span></div>
              <div class="text">
                <div class="starContent">
                  <div class="info same">评分:</div>
                  <Star class="star" :score=list.EvaluatValue>
                  </Star >
                </div>
                <div class="collectWrapper" v-if="list.IsCollect" @click="changeCollect(resource[index])">取消：<span class="star3"></span></div>
                <div class="collectWrapper" v-if="!list.IsCollect" @click="changeCollect(resource[index])">收藏：<span class="star4"></span></div>
              </div>
            </div>
          </div>
          <div class="fresh" v-show="up" style="height: 50px;line-height: 50px;margin-top: 0px">
            <Loading v-if="showmeLoad"></Loading>
            <div v-show="!showmeLoad" class="mui-text-center" style="color: grey;line-height: 50px;height: 20px">没有更多...</div>
          </div>
        </div>

      </div>
      <div v-if="remind" class="remindContent">
        <transition name="fade"><span class="remind">{{collectRemind}}</span></transition>
      </div>
    </div>

    </div>
    <div class="mui-bottom bottom">
      <Foot></Foot>
    </div>
    <!--查询资源错误提醒-->
    <div class="noResource" v-show="imgShow">
      <div><img src="../assets/img/3aa41c17c34735172a543eed6289129c.png" alt=""></div>
      <p>暂无资源</p>
    </div>
    <Regist style="position: absolute;z-index: 999" v-show="regist" v-on:registFn="registFn($event)" :isResource=isResource> </Regist>
    <!--错误提醒-->
    <Prompt
      title="错误"
      :msg=mistakeMsg
      confirm="确定"
      v-on:confirm1="confirm1($event)"
      v-if="mistake"
    >
    </Prompt>
    <transition name="fade2">
      <Confirm
        :titleConfirm=titleConfirm
        :msgConfirm=msgConfirm
        v-on:sure="sure($event)"
        v-on:giveUp="giveUp($event)"
        v-if="isCofirm"
      >
      </Confirm>
    </transition>

  </div>
</template>
<script>
  import heade from '@components/common/head2.vue'
  import Star from '@components/common/Star'
  import Loading from '@components/common/Loading'
  import  Prompt from '@components/common/Prompt.vue'
  import  Confirm from '@components/common/Confirm.vue'
  import  Foot from '@components/common/Foot.vue'
  import  Regist from '@components/Regist'
  import BScroll from 'better-scroll'
  export default {
    components:{
      heade,
      Star,
      Loading,
      Prompt,
      Foot,
      Confirm,
      Regist
    },
    data(){
      return{
        showmeLoad:true,
        mistakeMsg:'登陆过期重新登录',
        collectIndex:[],
        UserId:'',
        isResource:true,
        regist:false,
        titleConfirm:'',
        msgConfirm:'',
        isCofirm:false,
        mistake:false,
        imgShow:false,
        showme:true,
        left:"全部",
        right:'标题',
        cur:0,
        cur1:0,
        lefts:["全部","优秀论文",'优秀课例评选','优质课展评'],
        rights:["标题",'学科','年级','学期','教材版本','作者'],
        isShow:false,
        resource:[],
        score:'',
        collect:false,
        search:'',
        search3:{},
        collectVedio:{},
        ResourceQueryStr:{},
        scroll:{},
        contentScroll:{},
        // isCollect:false,
        rb:{},
        arr:[],
        remind:0,
        IsCollect:true,
        Page:1,
        PageNum : 10,
        OrderByStr : '',// 排序方式1 点击数，2收藏数 3评价数 4评分
        IsDesc :false,// 是否是倒序
        KeyWord : "",// 收索的关键字
        AllDataNumber:'',
        collectRemind:'收藏成功!',
        collectWord:'收藏',
        loadingConnecting: false,
        up: false,
        OrganCode:'',
        DeviceCode:'',
        OpenId:'',
        Pages:0

      }
    },

    created(){
      let me = this;
      me.ResourceQueryStr.PageNum = me.PageNum;
      me.ResourceQueryStr.OrderByStr = me.OrderByStr;
      me.ResourceQueryStr.IsDesc = me.IsDesc;
      this.$Global.zcServer.Post({
        IsNeedLogin: 'false',
        Paras:{
          UserId:me.$Global.UserId ,
          Name:'Vue_CourseResource',
          action:"Ext_ResourcePageQuery_RS",
          Data:{
            Page: me.Page,
            ResourceQueryStr: me.ResourceQueryStr,
          }
        },
        Callback:me.cbResourceQuery3,
        Scope:me,
      });

      // alert(me.$Global.UserId)
      me.$Global.zcServer.Post({
        IsNeedLogin:'false',
        Paras:{
          Name:'Vue_CourseResource',
          Action:'MyHead',
          UserId:me.$Global.UserId ,
          Data:{
            UserId:me.$Global.UserId
          }
        },
        Callback:me.Callback_MyHead,
        Scope:me
      });
    },
    methods:{
      /*组件函数*==========#*/
      confirm1(){

        this.mistake=false
        //this.$router.push('/Login')
      },
      registFn(regist2){
        this.regist=!regist2;
        this.isResource=true;
        console.log('regist2',regist2)

      },
      sure(){
        let me=this;
        me.isCofirm=false;
        me.regist=true;
        // me.$router.push('/Regist')

      },
      giveUp(){
        this.isCofirm=false
      },
      /*==============*/
      submit(){
        let me = this;
        me.ResourceQueryStr.PageNum = me.PageNum;
        me.ResourceQueryStr.OrderByStr = me.OrderByStr;
        me.ResourceQueryStr.IsDesc = me.IsDesc;
        if (me.left === '全部') {
          me.ResourceQueryStr.ProjectType = '';
        }
        else {
          me.ResourceQueryStr.ProjectType = me.left;
        }
        if (me.right === '教材版本') { me.ResourceQueryStr.MaterialVersion =me.search }
        if (me.right === '学科') { me.ResourceQueryStr.Subject = me.search}
        if (me.right === '年级') { me.ResourceQueryStr.Grade =me.search}
        if (me.right === '学期') { me.ResourceQueryStr.Term =me.search}
        if (me.right === '标题') { me.ResourceQueryStr.KeyWord =me.search}
        if (me.right === '作者') { me.ResourceQueryStr.Author =me.search}

        console.log('asd ===',me.ResourceQueryStr);
        this.$Global.zcServer.Post({
          IsNeedLogin: 'false',
          Paras:{
            UserId:me.$Global.UserId ,
            Name:'Vue_CourseResource',
            action:"Ext_ResourcePageQuery_RS",
            Data:{
              Page: me.Page,
              ResourceQueryStr: me.ResourceQueryStr,
            }
          },
          Callback:me.cbResourceQuery,
          Scope:me,
        });
      },
      goBack(){
        this.$router.push('/Index')
      },
      selectleft(num){
        this.left = this.lefts[num];
        this.cur =  !this.cur
      },
      leftOut(){
        this.cur = !this.cur
      },
      selectright(num){
        this.right = this.rights[num];
        this.cur1 =  !this.cur1
      },
      rightOut(){
        this.cur1 = !this.cur1
      },

      /*调用收藏接口*/
      changeCollect(collect){
        let me=this;
        me.IsCollect= !collect.IsCollect;
        this.collectIndex=collect;
        this.$Global.zcServer.Post({
          IsNeedLogin: 'true',
          Paras:{
            UserId:me.$Global.UserId ,
            Name:'Vue_CourseResource',
            action:"Ext_ResourceStoreIsCollect",
            Data:{
              IsCollect:me.IsCollect,
              SN: collect.SN,
              TS:collect.TS
            }
          },
          Callback:me.cb_collect,
          Scope:me,
        });
      },
      /*资源详情接口*/
      ResourceDetail(detail){
        let me=this;

        let data={};
        data.SN=detail.SN;
        data.TS=detail.TS;
        this.$store.commit('setSN',data);
        sessionStorage.setItem("DetailSN", JSON.stringify(data));
        this.$Global.zcServer.Post({
          IsNeedLogin: 'true',
          Paras:{
            UserId:me.$Global.UserId ,
            Name:'Vue_CourseResource',
            action:"Ext_ResourceStoreClickNumber",
            Data:{
              IsCollect: me.isCollect,
              SN: data.SN,
            }
          },
          Callback:me.cb_ClickNumber,
          Scope:me,
        });
        // me.$Global.UserId='1'
        this.$router.push("ResourceDetail")
      },

      /*回调函数*/

      Callback_MyHead(resJson,req) {
        console.log('个人信息');
        console.log(resJson);
        if (resJson.success == true) {
          sessionStorage.setItem('myName', resJson.data.Nick)
          sessionStorage.setItem('myRegphone', resJson.data.Tele)
        } else {

        }
      },
      /*手动查询资源*/
      cbResourceQuery(resJson,scope){
        if(resJson.data.Data.length==0){
          this.resource=resJson.data.Data;
          console.log('查詢資源');
          console.log( this.resource);
          this.imgShow=true;
          this.up=false
        }else{
          this.resource=resJson.data.Data;
          this.imgShow=false;
          this.up=false
        }
      },
      /*页面进入时候加载的资源*/
      cbResourceQuery3(resJson,scope){
        console.log('新所有资源');
        console.log(resJson);
        this.Pages=resJson.data.Pages
        this.showme=false
        /*合并数组*/
        if(this.Page<=resJson.data.Pages){
          this.resource.push.apply(this.resource,resJson.data.Data);
          this.scroll.refresh();
          this.showme=false
        }
        console.log('合并后资源');
        console.log(this.resource);

        this.$nextTick(()=>{
          this.showme=false
        });
      },
      cb_collect(resJson,scope){
        let me=this
        console.log('收藏',resJson);
        if(resJson.success==true){
          // me.isCollect=!me.isCollect;
          me.collectIndex.IsCollect=!me.collectIndex.IsCollect
          if(!me.IsCollect){
            me.collectRemind='取消收藏成功！';
          }else {
            me.collectRemind='收藏成功！';
          }
          me.remind=1;
          setTimeout(function () {
            me.remind=0;
          },1500);
        }else {

          if(resJson.msg.indexOf("PleaseRegistry")>=0){
            this.isCofirm=true;
            this.titleConfirm='提醒'
            this.msgConfirm='请注册并登陆后再收藏！'
          }else {
            this.mistake=true;
            this.mistakeMsg=resJson.msg
          }

        }
        // console.log('收藏',scope);
      },
      cb_ClickNumber(resJson,scope){
        console.log('點擊',resJson);
      },
      /*下拉加载更多*/
      BS() {
        this.$nextTick(()=>{
          if(!this.$refs.contentWrap) {
            return;
          }
          // better-scroll的初始化
          this.scroll = new BScroll(this.$refs.contentWrap, {
            probeType: 3,
            click:true,
            scrollX: false,
            bounce: false
          });
          // console.log("最大高度");
          // console.log(this.scroll.maxScrollY);
          this.scroll.on('scroll', pos => {
            // console.log("判断下拉的高度");
            // console.log(pos.y);
            //如果上拉超过30px 就显示下拉刷新的文字
            if(pos.y <this.scroll.maxScrollY+50) {
              this.up = true
            } else {
              this.up = false
            }
          });
          //touchEnd 通过这个方法来监听上拉
          this.scroll.on('touchEnd', pos => {
            // 下拉动作
            if(pos.y <this.scroll.maxScrollY+100) {//距离底部100高就调用刷新接口
              this.scroll.refresh();
              console.log('上啦加载成功');
              let me = this;
              me.Page=me.Page+1;

              if(me.Page>me.Pages){
                me.showmeLoad=false;
                return
              }
              console.log('加载到第几页：'+me.Page);
              me.ResourceQueryStr.PageNum = me.PageNum ;
              me.ResourceQueryStr.OrderByStr = me.OrderByStr;
              me.ResourceQueryStr.IsDesc = me.IsDesc;
              this.$Global.zcServer.Post({
                IsNeedLogin: 'false',
                Paras:{
                  UserId:me.$Global.UserId ,
                  Name:'Vue_CourseResource',
                  action:"Ext_ResourcePageQuery_RS",
                  Data:{
                    Page: me.Page,
                    ResourceQueryStr: me.ResourceQueryStr,
                  }
                },
                Callback:me.cbResourceQuery3,
                Scope:me,
              });
              me.up = false;
            }
            // if(this.scroll.maxScrollY > pos.y + 10) {
            console.log('加载更多');
            // console.log(this.scroll.maxScrollY);
            //使用refresh 方法 来更新scroll  解决无法滚动的问题
            this.scroll.refresh();
            // }
          });
          console.log(this.scroll.maxScrollY);
        })
      }
    },
    mounted() {
      // this.showme=false;
      setTimeout(() => {
        this.BS();
      }, 100);
    },
  }
</script>
<style scoped>
  /*进入页面动画*/
  #Loading {
    top:50%;
    left:50%;
    position: absolute;
    -webkit-transform: translateY(-50%)  translateX(-50%);
    transform: translateY(-50%)  translateX(-50%);
    z-index:100;
  }
  @-webkit-keyframes ball-beat {
    50% {
      opacity: 0.2;
      -webkit-transform: scale(0.75);
      transform: scale(0.75);
    }

    100% {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1); }
  }

  @keyframes ball-beat {
    50% {
      opacity: 0.2;
      -webkit-transform: scale(0.75);
      transform: scale(0.75);
    }

    100% {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1); }
  }

  .ball-beat > div {
    background-color: #279fcf;
    width: 15px;
    height: 15px;
    border-radius: 100% !important;
    margin: 2px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    display: inline-block;
    -webkit-animation: ball-beat 0.7s 0s infinite linear;
    animation: ball-beat 0.7s 0s infinite linear; }
  .ball-beat > div:nth-child(2n-1) {
    -webkit-animation-delay: 0.35s !important;
    animation-delay: 0.35s !important; }
.bb{
  text-align:center;
  position: absolute;
  left:0;width: 100%;
  top:0px;
  background: white;
  outline: none;
  padding: 3px;
  z-index: 99;
}
  .mui-content>.bottom{
    width: 100%;
    position: absolute;
    display: inline-block;
    bottom: 0px;
  }
  .mui-content .search{
    width: 100%;
    /*margin: 2% 0 ;*/
    position: relative;
  }
  .mui-content .search input{
    width: 100%;
    border: none;
    outline: none;
  }
  .mui-content .search input::-webkit-input-placeholder {
    font-size: 13px;
    text-align: left;
  }
  .mui-content .search .mui-icon{
    position: absolute;
    width: 25px;
    height: 25px;
    right: 10px;
    top: 8px;
    color:rgba(93, 194, 240, 1);
  }
  .mui-content .nav{
    width: 100%;
    display: flex;
    height: 2.5rem;
    line-height:2.5rem;
    background-color: white;
    border-bottom:1px solid gainsboro;
  }

  .mui-content .nav .navRight{
    width: 50%;
    border-right: 1px solid gainsboro;
    background-image: url("../assets/img/jiantou.png") ;
    background-repeat:no-repeat;
    background-position: 80% ;
  }
  .mui-content .nav .navRight:last-child{
    border-right:none
  }
  .mui-content .nav .navLeft{
    width: 50%;
    border-right: 1px solid gainsboro;
    background-image: url("../assets/img/jiantou.png") ;
    background-repeat:no-repeat;
    background-position: 86% ;
  }
  .mui-content .nav *{
    text-align: center;
    padding: 0;
    margin: 0;
    border: none;
    outline: none;
  }
.mui-content .contentWrapper{
  position: absolute;
  top:95px;
  width: 100%;
  bottom: 56px;
  overflow: hidden;
}

.mui-content .content{
  display: flex;
  background-color: white;
  padding-left: 3%;
  margin-top: 10px;
  border-bottom: 1px solid gainsboro;
}
.mui-content .content:first-child{
  margin-top: 0px;
}
.mui-content .content .leftContent{
  /*width: 40%;*/
flex:0 0 9.3rem
}
.mui-content .content .leftContent img{
  width:80%;
  height: 65%;
  margin-top: 28px;
}
.mui-content .content .rightContent{
  flex: 1;
  overflow: hidden;
}
.mui-content .content .rightContent .title{
  height: 35px;
  line-height: 40px;
  color:rgba(93, 194, 240, 1);
  font-size: 1rem;
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.mui-content .content .rightContent .text *{
  font-size: 0.8rem;
  color: #8f8f94;
  padding-right:6px;
}
.mui-content .content .rightContent .text .starContent{
  float: left;
}
.mui-content .content .rightContent .text .starContent *{
  display: inline-block;
}

.mui-content .content .rightContent .text .collectWrapper{
  overflow: hidden;
  float: right;
}
.mui-content .content .rightContent .text .collectWrapper *{
  display: inline-block;
}
.mui-content .content .rightContent .text .collectWrapper .same{

  padding-bottom: 15px;
  padding-right: 0px;
}
.mui-content .content .rightContent .text .starContent .same{
  padding-right: 2px;
}
.collectWrapper .star3{
  display: inline-block;
  width: 16px;
  height: 15px;
  background-size: 16px 15px;
  background-image: url('../assets/img/shouCang2.png');
}
.collectWrapper .star4{
  display: inline-block;
  width: 16px;
  height: 15px;
  background-size: 16px 15px;
  background-image: url('../assets/img/shouCang.png');
}
.mui-content .remindContent{
  position: absolute;
  width: 100%;
  height: 10%;
  /*background-color: yellow;*/
  z-index: 999;
  top: 55%;
  display: flex;
  align-items: center;
  justify-content:center ;
}
.mui-content .remindContent .remind{
background-color: rgb(76, 76, 76);
  color:white;
  padding: 5px 10px 5px 18px;
  border-radius: 20px;
  font-size: 0.8rem;

}
  .mui-content .noResource{
    width: 100%;
    display: flex;
    align-items:center ;
    justify-content: center;
    flex-direction: column
  }
  .mui-content .noResource img{
    height: 150px;
    width: 150px;
    visibility:hidden;
  }
</style>
